import React,{ useState, useEffect, useRef } from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, WhiteSpace, WingBlank,Pagination,Icon } from 'antd-mobile';
import $ from 'jquery';
import './index.scss'

import demo from './index'

import Top from '../../components/top/top'
interface IState {
}
interface IProps extends RouteComponentProps {
}
class Myinfo extends React.Component<IProps, IState> {
  render() {
    demo();
    return (
      <div>
        <Top history={this.props.history}></Top>
        <div>复习TS</div>
        <Counter/>
      </div>
    )
  }
}

const Counter = () => {
  const [count, setCount] = useState<number>(100)
  const preCountRef = useRef<number>(count)
  // useEffect(() => {
  //   preCountRef.current = count
  // })

  const handleCount = () => {
    setTimeout(() => {
      console.log('current count: ' + count)
      console.log(preCountRef.current)
    }, 3000);
  }

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>加</button>
      <p>current count: { count }</p>
      <button onClick={() => handleCount()}>弹框显示</button>
    </div>
  )
}



//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin,
    userInfo:store.userInfo
  })
}

const mapDispatch = ({ store }: any) => ({
  // changeLoaderType() {
  //   store.changeLoaderType(true)
  // }
  setPlayListAct(data:any){
    store.setPlayListAct(data)
  },
  setMp3ListAct(data:any){
    store.setMp3ListFun(data)
  },
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Myinfo); 